<template>
  <!--试验记录-->
  <div class="app-container">
    <el-card class="dis">
      <el-form :inline="true" :model="searchData"class="formHeight">
        <el-form-item label="">
          <el-input size="mini" placeholder="关键字：试验标题" v-model="searchData.keyword"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
      </el-card>

      <!--  列表  -->
    <el-card class="mt20">
      <el-table :data="tableData" size="mini">
        <el-table-column label="任务编号" prop="task_num" align="center"/>
        <el-table-column label="计划编号" prop="spec_num" align="center"/>
        <el-table-column label="工单编号" prop="work_num" align="center"/>
        <el-table-column label="开始时间" prop="task_start" align="center"/>
        <el-table-column label="结束时间" prop="task_end" align="center"/>
        <el-table-column label="任务结果" align="center">
        <template slot-scope="scope" align-center>
              <el-tag>{{scope.row.status_name}}</el-tag>
        </template>
        </el-table-column>
        <el-table-column label="执行班组/人" prop="user_name" align="center" width="100"/>
        <el-table-column label="试验标题" prop="task_title" align="center" width="100"/>
        <el-table-column label="试验内容" prop="task_content" align="center"/>
        <el-table-column label="累计用时" prop="total_time" align="center" width="100"/>
        <el-table-column label="任务附件" prop="?" align="center">
          <!-- 自定义模板，scope.row即为当前行 -->
          <template slot-scope="scope" align-center>
            <el-button type="text" @click="see(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px" align="center">
          <!-- 自定义模板，slot.row即为当前行 -->
          <template slot-scope="scope" align-center>
            <el-button type="primary" size="mini" @click="process(scope.row)">进度</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--   分页   -->
<!--      <el-pagination-->
<!--        style="float: right;"-->
<!--        :page-size="searchData.limit"-->
<!--        :current-page="searchData.offset"-->
<!--        layout="total, prev, pager, next, jumper"-->
<!--        :total="total"-->
<!--        @current-change="handleCurrentChange"-->
<!--      />-->
      <pagination style='float: right;' v-show='total>0' :total='total' :page.sync='searchData.offset' :limit.sync='searchData.limit' @pagination='getList' />
    </el-card>
    <!-- 引入的详情弹窗组件 ref 为js中引用的名称 -->
    <inspection-task-process ref="inspectionTaskProcess"></inspection-task-process>
    <experiment-exlist-see ref="experimentExlistSee"></experiment-exlist-see>
  </div>
</template>

<script>
import { spectionTasklist } from '@/api/experiment'
import InspectionTaskProcess from '@/views/operations/experiment/exlist/components/process'
import ExperimentExlistSee from '@/views/operations/experiment/exlist/components/see'

export default {
  components: { ExperimentExlistSee, InspectionTaskProcess },
  name: 'index',
  data() {
    return {
        searchData:{
            task_type: '2',
            limit: 10,
            offset: 0,
            keyword:''
        },
        tableData: [],
        total: 0
    }
  },
  mounted() {
      this.getList();
  },
  methods: {
    // 查询列表
    getList() {
      // 调用接口js中的接口方法
      spectionTasklist(this.searchData).then(res => {
        // debugger;
        this.tableData = res.data.plans
        this.total = res.data.total
      })
    },
    // 翻页的时候执行的方法
    handleCurrentChange(val) {
      // 页码赋值

      this.searchData.offset = val;
      // 调用查询方法
      this.getList();
    },
    // 查询
    search() {
      // 手动改变页面到第一页
      this.searchData.offset = 0;
      // 调用查询方法
      this.getList();
    },
    // 查看进度
    process(row) {
      // 打开弹窗
      this.$refs.inspectionTaskProcess.open(row);
    },
    see(row) {
      this.$refs.experimentExlistSee.open(row);
    }
  }

}
</script>

<style scoped>
.mt20{
    margin-top: 20px;
  }
.formHeight{
  height: 40px;
}
</style>
